<!DOCTYPE html>
<html>
<head>
    <title>jQuery工作流程步骤进度插件ystep</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入ystep样式 -->
    <link rel="stylesheet" href="${staticServer}/inc/style/ystep.css"/>
</head>
<body style="width:450px; margin:0 auto">

<br><br><br><br><br>
<!-- ystep容器 -->

<br><br><br><br><br>

<div class="ystep4"></div>

<script src="${staticServer}/inc/js/jquery.js"></script>
<script src="${staticServer}/inc/js/ystep.js"></script>
<script>
    $(function () {
        var arr = ${viewList};
        var div = document.getElementById('divList');//获取一个id是divid的div节点，往这个节点中添加p节点
        $.each(arr, function (index, content) {
            var p = document.createElement('p');//创建p节点
            p.innerHTML = content.title + "：(" + content.content + ")";//p节点显示的文字
            div.appendChild(p);//往div中添加p节点
        });
    });

</script>
<script>
    //根据jQuery选择器找到需要加载ystep的容器
    //loadStep 方法可以初始化ystep
    $(".ystep4").loadStep({
        size: "large",
        color: "blue",
        steps: ${list}
    });

    $(".ystep4").setStep(${lenth});

</script>
<div id="divList" style="text-align:center; font:normal 14px/24px 'MicroSoft YaHei';">
    <p>流程详情信息</p>


</div>
</body>
</html>